<!-- ChatWindow.vue -->
<template>
    <div class="chat-container">
      <div class="chat-messages" ref="messagesContainer">
        <div 
          v-for="(message, index) in formattedMessages"
          :key="index"
          :class="['message-bubble', message.isUser ? 'user' : 'other']"
        >
          <div class="message-content">{{ message.content }}</div>
          <div class="message-time">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>
  
      <div class="input-area">
        <el-input
          v-model="newMessage"
          placeholder="输入消息..."
          @keyup.enter.native="sendMessage"
          class="message-input"
        ></el-input>
        <el-button
          type="primary"
          @click="sendMessage"
          :disabled="!newMessage.trim()"
          class="send-button"
        >发送</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChatWindow',
    props: {
      messages: {
        type: Array,
        default: () => [],
        validator: (value) => {
          return value.every(msg => 
            'content' in msg && 
            'isUser' in msg &&
            'timestamp' in msg
          )
        }
      }
    },
    data() {
      return {
        newMessage: ''
      }
    },
    computed: {
      formattedMessages() {
        return this.messages.map(msg => ({
          ...msg,
          timestamp: new Date(msg.timestamp)
        }))
      }
    },
    watch: {
      messages: {
        handler() {
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      sendMessage() {
        const content = this.newMessage.trim()
        if (content) {
          const newMsg = {
            content,
            isUser: true,
            timestamp: new Date().toISOString()
          }
          this.$emit('send', newMsg)
          this.newMessage = ''
        }
      },
      formatTime(date) {
        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
      },
      scrollToBottom() {
        const container = this.$refs.messagesContainer
        if (container) {
          container.scrollTop = container.scrollHeight
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 700px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #f5f7fa;
  }
  
  .chat-messages {
    
    overflow-y: auto;
    padding: 20px;
  }
  
  .message-bubble {
    margin: 10px 0;
    padding: 12px 16px;
    border-radius: 12px;
    position: relative;
    word-break: break-word;
  }
  
  .message-bubble.user {
    background-color: #409eff;
    color: white;
    margin-left: auto;
  }
  
  .message-bubble.other {
    background-color: white;
    border: 1px solid #ebeef5;
    margin-right: auto;
  }
  
  .message-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .message-time {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.8;
  }
  
  .user .message-time {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .other .message-time {
    color: #909399;
  }
  
  .input-area {
    display: flex;
    padding: 20px;
    border-top: 1px solid #ebeef5;
    background-color: white;
  }
  
  .message-input {
    flex: 1;
    margin-right: 10px;
  }
  
  .send-button {
    width: 100px;
  }
  
  /* 滚动条样式 */
  .chat-messages::-webkit-scrollbar {
    width: 6px;
  }
  
  .chat-messages::-webkit-scrollbar-thumb {
    background-color: #c0c4cc;
    border-radius: 3px;
  }
  
  .chat-messages::-webkit-scrollbar-track {
    background: #f5f7fa;
  }
  </style>